import ScrollView from "@/components/scroll-view";
import SectionHeader from "@/components/section-header";
import PropTypes from "prop-types";
import React, { memo } from "react";
import YearnCityItem from "./yearn-city-item";
import { CityWrapper } from "./style";

const YearnCity = memo((props) => {
  const { data } = props;
  return (
    <CityWrapper>
      <SectionHeader title={data.title} subTitle={data.subtitle} />
      <div className="content">
        <ScrollView>
          {data.list.map((item) => {
            return <YearnCityItem itemData={item} key={item.city} />;
          })}
        </ScrollView>
      </div>
    </CityWrapper>
  );
});

YearnCity.propTypes = {
  data: PropTypes.object,
};

export default YearnCity;
